<template>
	<view class="page-item">
		<view class="pen-box">
			<view class="arrow-left-item" @click="handleRetuen">
				<uv-icon name="arrow-left" size="22px" color="#fff"></uv-icon>
			</view>
			<view class="pen-text">预约详情</view>
			<view class=""></view>
		</view>

		<view class="content">
			<view class="head-box">
				<view class="result-head">
					<view class="head-img">
						<image src="/static/icon/icon-8.png" mode=""></image>
					</view>
					<view class="head-title">等待被访人审批</view>

				</view>
				<view class="head-tips">结果将会以短信或者微信通知发送给您</view>
			</view>

			<view class="user-info">
				<view class="by-box">
					<view class="by-name">被访人姓名</view>
					<view class="by-info">某某</view>
				</view>
				<view class="by-box">
					<view class="by-name">联系电话</view>
					<view class="by-info">154568458</view>
				</view>
				<view class="by-box">
					<view class="by-name">所属部门</view>
					<view class="by-info">信息中心</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="from-item">
				<view class="info-title">
					访客信息
				</view>
				<view class="">
					<view class="form-title">您的姓名<span class="heavy">*</span></view>
					<view class="">
						<uv-input placeholder="您的姓名" border="bottom" class="force-style-input"
							placeholderStyle="font-weight: normal;" color="#333" fontSize="16px"
							:customStyle="inputCustomStyle"></uv-input>
					</view>
				</view>
				<view class="">
					<view class="form-title">联系电话<span class="heavy">*</span></view>
					<view class="">
						<uv-input placeholder="您的联系电话" border="bottom" class="force-style-input" color="#333"
							fontSize="16px" :customStyle="inputCustomStyle" type="number" maxlength="11"
							placeholderStyle="font-weight: normal;"></uv-input>
					</view>
				</view>
				<view class="">
					<view class="form-title">访客证件类型</view>
					<view class="">
						<CustomPicker :options="certificateTypes" @change="handleCertificateChange" />
					</view>
				</view>
				<view class="">
					<view class="form-title">证件号码<span class="heavy">*</span></view>
					<view class="">
						<uv-input placeholder="填写证件号码" border="bottom" class="force-style-input"
							placeholderStyle="font-weight: normal;" color="#333" fontSize="16px"
							:customStyle="inputCustomStyle"  maxlength="18"></uv-input>
					</view>
				</view>
				<view class="">
					<view class="form-title">来访事由<span class="heavy">*</span></view>
					<view class="">
						<CustomPicker :options="countryOptions" @change="handleCountryChange" />
					</view>
				</view>
				<view class="">
					<view class="form-title">来访时间<span class="heavy">*</span></view>
					<DatetimePicker v-model="selectedDatetime" @confirm="onDatetimeConfirm"
						format="YYYY年MM月DD日 HH:mm" />
				</view>
				<view class="">
					<view class="form-title">结束时间<span class="heavy">*</span></view>
					<DatetimePicker v-model="selectedEndDatetime" @confirm="onDatetimeEndConfirm"
						format="YYYY年MM月DD日 HH:mm" />
				</view>
				<view class="">
					<view class="form-title">随访人数<span class="heavy">*</span></view>
					<view class="">
						<uv-input placeholder="请输入随访人数" border="bottom" class="force-style-input" color="#333"
							fontSize="16px" :customStyle="inputCustomStyle" @blur="changeblur" type="number"
							placeholderStyle="font-weight: normal;"></uv-input>
					</view>
				</view>
				<view class="">
					<view class="form-title">车牌号</view>
					<view class="">
						<uv-input placeholder="请输入车牌号" border="bottom" class="force-style-input" color="#333"
							fontSize="16px" :customStyle="inputCustomStyle"
							placeholderStyle="font-weight: normal;"></uv-input>
					</view>
				</view>
			</view>

		</view>
		<!-- 底部留白，确保最后一项能完全显示 -->
		<view class="bottom-padding"></view>
		
		<view class="sub-item">
			<view class="sub-btn">提交申请</view>
		</view>
		
		<!-- 随访人数弹窗 -->
		<uv-popup ref="visitPopup" class="custom-popup " style="z-index: 99;" :closeable="true" round="10px"
			:closeOnClickOverlay="false">
			<view class="visit-popup">
				<view class="visit-title">
					填写随访人信息
				</view>
				<scroll-view scroll-y="true" style="max-height: 70vh; ">
					<view class="visit-from" v-for="(item, index) in visitNumber" :key="index">
						<view class="user-input">
							<view class="">姓名：</view>
							<view class="">
								<uv-input :placeholder="`随访人${index + 1}姓名(必填)`" color="#333" fontSize="16px"
									border="none" inputAlign="right"></uv-input>
							</view>
						</view>
						<view class="user-input" style="border: none;">
							<view class="">证件号码：</view>
							<view class="">
								<uv-input :placeholder="`随访人${index + 1}证件号(必填)`" color="#333" fontSize="16px"
									border="none" inputAlign="right" type="number"></uv-input>
							</view>
						</view>
					</view>


					<view class="form-follow-up">
						<view class="NextStep">确定</view>
					</view>
				</scroll-view>
			</view>


		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	import CustomPickerVue from '@/components/CustomPicker/CustomPicker.vue';
	import DatetimePicker from '@/components/DatetimePicker/DatetimePicker.vue'
	// 返回上一页
	const handleRetuen = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}
	//输入框
	const inputCustomStyle = ref({
		padding: '12px 0',
		fontSize: '16px',
		fontWeight: '600',
		color: '#333',

	})

	// 证件类型选项
	const certificateTypes = [{
			id: 1,
			label: '身份证'
		},
		{
			id: 2,
			label: '驾驶证'
		},
		{
			id: 3,
			label: '护照'
		}
	];
	// 处理证件类型选择变化
	const handleCertificateChange = (selected) => {
		console.log('证件类型选择:', selected);
	};

	// 事由选项
	const countryOptions = [{
			id: 1,
			label: '洽谈'
		},
		{
			id: 2,
			label: '办事'
		},
		{
			id: 3,
			label: '商务'
		},
	];
	// 处理事由选择变化
	const handleCountryChange = (selected) => {
		console.log('国家选择:', selected);
	};

	// 选中的来访时间 Number(new Date())
	const selectedDatetime = ref(null);
	const onDatetimeConfirm = (timestamp, formatted) => {
		console.log('来访时间：', formatted);
	};

	// 选中的结束时间
	const selectedEndDatetime = ref(null);
	const onDatetimeEndConfirm = (timestamp, formatted) => {
		console.log('结束时间：', formatted);
	};

	// 随访人数
	const visitPopup = ref(null)
	const visitNumber = ref(null)
	const changeblur = (value) => {
		// 修复获取输入值的方式
		const inputValue = value.detail?.value || value;

		visitNumber.value = [];
		const num = parseInt(inputValue, 10);

		if (!isNaN(num) && num > 0) {
			for (let i = 0; i < num; i++) {
				visitNumber.value.push(i);
			}

			if (visitPopup.value) {
				visitPopup.value.open('');
			}
		}
	};
</script>

<style lang="scss">
	// .page-item {
	// 	width: 100vw;
	// 	min-height: 100vh;
	// 	background-color: #5979FF;
	// }
	.page-item {
		width: 100vw;
		min-height: 100vh;
		background-image: linear-gradient(to bottom, #5078FE 50%, #eff4fb);
		background-size: 100% 400px;
		background-repeat: no-repeat;
		background-color: #eff4fb;
	}


	.pen-box {
		width: 100%;
		height: 100px;
		padding: 0 10px;
		padding-top: 30px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.pen-text {
			font-size: var(--font-16);
			color: var(--color-ff);
			font-weight: 600;

		}


	}

	.content {
		width: 100vw;
		height: auto;
		padding: 20px 20px;
		box-sizing: border-box;

		.head-box {
			.result-head {
				display: flex;
				align-items: center;
				gap: 10px;

				.head-img {
					width: 24px;
					height: 24px;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.head-title {
					color: var(--color-ff);
					font-weight: 800;
					font-size: var(--font-18);
				}

				/* 数字圆圈样式 */
				.num-circle {
					border: 1px solid #fff;
					border-radius: 50%;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 24px;
					height: 24px;
					color: #fff;
					font-size: var(--font-18);
				}
			}

			.head-tips {
				color: #FEFBF2;
				font-size: var(--font-16);
				padding-left: 42px;
				padding-top: 10px;
				box-sizing: border-box;
			}
		}

		.user-info,
		.from-item {
			width: 100%;
			margin: 20px 0;
			background-color: #fff;
			height: auto;
			border-radius: 10px;

			padding: 20px;
			box-sizing: border-box;
		}

		.user-info {
			.by-box {
				display: flex;
				flex-direction: column;
				gap: 6px;
				margin: 14px 0;

				.by-name {
					color: var(--color-333);
					font-size: var(--font-16);
				}

				.by-info {
					color: var(--color-333);
					font-size: var(--font-18);
					font-weight: 800;
				}
			}



		}

		.from-item {
			display: flex;
			flex-direction: column;
			gap: 20px;

			.info-title {
				width: 100%;
				padding: 6px 0px;
				box-sizing: border-box;
				color: var(--color-666);
				font-size: var(--font-16);
				border-bottom: 1px solid #cccccc;
			}

			.heavy {
				color: red;
				font-size: var(--font-16);
			}


			.form-title {
				color: var(--color-666);
				font-size: var(--font-16);

			}

			.certificate {
				width: 100%;
				padding: 10px 8px;
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid #DADBDE;
			}

			::v-deep .input-placeholder {
				color: #999 !important;

			}
		}
	}
	.visit-popup {
		width: 90vw;
		max-height: 80vh;
		padding: 30px;
		box-sizing: border-box;
	
		.visit-title {
			font-size: var(--font-18);
			color: var(--color-333);
			font-weight: bold;
		}
	
	
		.visit-from {
			width: 100%;
			height: auto;
			margin-top: 20px;
			background-color: #F8F8F8;
			border-radius: 10px;
			padding: 10px;
			box-sizing: border-box;
	
			.user-input {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10px 0px;
				box-sizing: border-box;
				border-bottom: 1px solid #d5d5d5;
			}
		}
	
		.form-follow-up {
			margin-top: 20px;
			display: flex;
			flex-direction: column;
			gap: 10px;
	
	
	
			.NextStep {
				width: 100%;
				height: 50px;
				text-align: center;
				line-height: 50px;
				color: var(--color-ff);
				font-size: var(--font-16);
				background-color: #2b74e2;
				border-radius: 50px;
				font-weight: 600;
			}
	
	
		}
	}
	
	.sub-item {
		width: 100%;
		height: 100px;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	
		.sub-btn {
			width: 80%;
			height: 40px;
			text-align: center;
			line-height: 40px;
			background-color: #2b74e2;
			border-radius: 50px;
			color: var(--color-ff);
			font-size: var(--font-16);
		}
	}
	/* 底部留白确保最后一项可见 */
	.bottom-padding {
		height: 80px;
	}
	
</style>